<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="div">
    <b style="color: red; font-size: 20px;">管理员账户列表</b>
    <!--<div style="float: right;">
        <el-button type="primary" @click="showAddAdmin">添加管理员</el-button>
    </div>-->
    <!--
        :data="tableData" 关联vue中的data中的tableData，后台将数据赋值给tableData，然后显示到这里
    -->
    <el-table :data="tableData" >
        <el-table-column align="center" type=index label="序号" width="100"></el-table-column>
        <el-table-column align="center" prop="adminName" label="用户名"></el-table-column>
        <el-table-column align="center" prop="adminRole" label="角色"></el-table-column>
        <el-table-column align="center" prop="faculty.facultyName" label="管理范围"></el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="props">
                <el-button type="warning" @click="">编辑</el-button>
                <el-button type="danger" @click="">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--
        分页组件
          @size-change： 当改变每页条数时触发的函数
          @current-change：当改变页码时触发的函数
          current-page ：默认的页码
          :page-sizes：每页条数选择框中显示的值
          :page-size : 默认的每页条数
          layout： 分页组件的布局
              total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
          :total: 总条数
    -->

</div>

<script>
    new Vue({
        el: "#div",
        data: {
           userInfo:{
           }
        },
        methods: {

        created() {
            //调用分页查询功能
            this.selectByPage();
        }
    });
</script>
</body>
</html>